<template>
  <div id="multiDateImg">
    <a-card size="small">
      <!-- <a slot="extra" href="#">
        <a-icon type="close" @click="closeCard" />
      </a> -->
      <div class="content">
        <div class="select-plane">
          <a-select
            size="small"
            v-model="currentType"
            style="width: 70px"
            @change="onChangeType"
          >
            <a-select-option key="all" value="all">
              {{ "全部" }}
            </a-select-option>
            <a-select-option
              v-for="item in MultiImageTypes"
              :key="item.resolution"
              :value="item.resolution"
            >
              {{ item.name }}
            </a-select-option>
          </a-select>
        </div>
        <div class="slider-end">{{ endyear }}</div>
        <div class="slider-plane">
          <a-slider
            :marks="marks"
            :included="false"
            :max="max"
            :min="min"
            :step="1"
            dots
            @change="onChange"
            :tipFormatter="getTooptitle"
          />
        </div>
        <div class="slider-start">{{ startyear }}</div>
      </div>
    </a-card>
  </div>
</template>

<script>
import L from "leaflet";
import services from "@/services/api";
export default {
  computed: {
    MultiImageTypes() {
      return this.$store.state.config.MultiImageTypes;
    },
    MultiLayerGroup() {
      return this.$store.state.MultiLayerGroup;
    },
  },
  data() {
    return {
      currentType: undefined,
      imgDataTypes: undefined,
      date: 0,
      max: 0,
      min: undefined,
      marks: {},
      tooptitle: null,
      imagelayerdata: null,
      endyear: null,
      startyear: null,
    };
  },
  methods: {
    getTooptitle: function () {
      if (this.imagelayerdata) {
        return `${this.imagelayerdata.name.split("_")[0]}_${
          this.imagelayerdata.fullname
        }`;
      } else {
        return null;
      }
    },
    closeCard() {
      this.MultiLayerGroup.clearLayers();
      this.$parent.isMultiDateImg = false;
    },
    onChange(value) {
      this.date = value;
      this.imagelayerdata = this.currentImgdata[value];
      console.log("当前选中的时相数据", this.imagelayerdata);
      if (this.layerId)
        this.MultiLayerGroup.removeLayer(
          this.MultiLayerGroup.getLayer(this.layerId)
        );
      this.imagelayer = L.supermap
        .wmtsLayer(this.imagelayerdata.resturl, {
          style: "default",
          tilematrixSet: "EPSG:3857",
          format: "image/png",
          Request: "GetTile",
          requestEncoding: "KVP",
        })
        .addTo(this.MultiLayerGroup)
        .setZIndex(3);
      this.layerId = this.MultiLayerGroup.getLayerId(this.imagelayer);
    },
    jsonsort(obj) {
      for (var i = 0; i < obj.length; i++) {
        for (var j = i + 1; j < obj.length; j++) {
          if (obj[i].serviceyear > obj[j].serviceyear) {
            var temp = obj[i];
            obj[i] = obj[j];
            obj[j] = temp;
          }
        }
      }
      return obj;
    },
    onChangeType(value) {
      value === "all"
        ? this.dealAlldata()
        : ((this.currentImgdata = []),
          (this.currentImgdata = this.ImgsData.filter(
            (item) => item.resolution === value
          )[0].data));

      let self = this;
      this.marks = {};
      this.min = 0;
      let i = this.min;
      this.currentImgdata.map(function () {
        self.marks[i++] = "";
      });
      this.max = i - 1;

      this.startyear = this.currentImgdata[this.min].serviceyear
        .toString()
        .substring(0, 4);
      this.endyear = this.currentImgdata[this.max].serviceyear
        .toString()
        .substring(0, 4);
      this.date = self.max;
      console.log("当前滑动条数据", this.marks, self.min, self.max);
      this.onChange(this.max);
    },
    getImgData(value) {
      let itemdata = this.MultidateImgs.filter(
        (item) =>
          item.props.filter((item) => item.code === "dataresolution")[0]
            .value === value && item.permission
      );
      itemdata.map((item) => {
        item.serviceyear = parseInt(
          item.props.filter((item) => item.code === "serviceyear")[0].value
        );
      });
      itemdata = this.jsonsort(itemdata);

      // itemdata = itemdata.filter((item) => item.permission == true);
      this.ImgsData.push({
        resolution: value,
        data: itemdata,
      });
      console.log(this.ImgsData);
    },
    queryimagedata() {
      let self = this;
      services.queryImages().then((res) => {
        self.MultidateImgs = res.content;

        self.MultiImageTypes.map((item) => {
          self.getImgData(item.resolution);
        });
        self.onChangeType(self.currentType);
      });
    },
    dealAlldata() {
      this.currentImgdata = [];
      let self = this;
      this.ImgsData.map((item) => {
        item.data.map((item) => {
          self.currentImgdata.push(item);
        });
      });
      this.currentImgdata = this.jsonsort(this.currentImgdata);
    },
  },
  mounted() {
    this.ImgsData = [];
    this.currentType = "all";

    this.queryimagedata();
  },
};
</script>

<style lang="less" scoped>
#multiDateImg {
  .ant-card-small {
    opacity: 1;
    width: 470px;
    border: 1px solid #e8e8e8;

    /deep/ .ant-card-body {
      padding: 0px !important;
      .content {
        text-align: center;
        padding: 10px;
        border-radius: 1em;
        .select-plane {
          display: inline-block;
          margin-right: 10px;
          float: left;
          margin-top: 12px;
        }
        .slider-start {
          display: inline-block;
          float: right;
          margin-left: 5px;
          margin-top: 12px;
        }
        .slider-end {
          display: inline-block;

          float: right;
          margin-top: 12px;
        }
        .slider-plane {
          display: inline-block;
          width: 60%;
          float: right;
          padding: 0px;

          user-select: none;
          margin-right: 10px;
          margin-left: 10px;
          //滑条样式
          .ant-slider-step {
            position: absolute;
            width: 100%;
            height: 10px;
            background: #0379f891;
            border-radius: 0px !important;
          }
          //滑动图标
          .ant-slider-handle {
            position: absolute;
            width: 16px;
            height: 16px;
            top: 15px;
            background-image: url("../../assets/imgs/icons/Up-6.png");
            margin-top: 0px !important;
            border: none !important;
            border-radius: 0px !important;
            z-index: 2;
            cursor: pointer;
            transition: border-color 0.3s, box-shadow 0.6s,
              transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
          }
          .ant-slider-handle:focus {
            border-color: #1386f1 !important;
            outline: none;
            box-shadow: 0 0 0 0px #fafafa !important;
          }
          //分割样式
          .ant-slider-dot {
            position: absolute;
            top: 0px;
            width: 2px;
            height: 10px;
            background-color: rgb(8, 204, 253);
            border: 2px solid #3ee9db;
            border-radius: 1px;
            cursor: pointer;
          }
          .ant-slider-dot:last-child {
            margin-left: 0px;
            border-bottom-right-radius: 2px;
            border-top-right-radius: 2px;
            border-bottom-left-radius: 0px;
            border-top-left-radius: 0px;
          }
          .ant-slider-dot:first-child {
            margin-left: -4px;
            border-bottom-right-radius: 0px;
            border-top-right-radius: 0px;
            border-bottom-left-radius: 2px;
            border-top-left-radius: 2px;
          }
        }
      }
    }
  }
}
</style>
